<template>
  <div class="pagination" v-if="totalPages>1">
    <!-- 使用v-for循环生成1到totalPages的所有页码 -->
    <a href="javascript:void(0)" :class="{ disabled: currentPage === 1 }" @click="goToPage(currentPage - 1)">上一页</a>
    <a href="javascript:void(0)" v-for="page in totalPages" :key="page"
       :class="{ active: currentPage === page }"
       @click="goToPage(page)">{{ page }}</a>
    <a href="javascript:void(0)"  :class="{ disabled: currentPage === totalPages }" @click="goToPage(currentPage + 1)">下一页</a>
    <span class="page-info">第{{ currentPage }}页/共{{ totalPages }}页</span>
  </div>
</template>

<script setup>
const emit = defineEmits(['page-changed'])
defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  totalPages: {
    type: Number,
    default: 5
  }
});

const goToPage = (page) => {
  emit('page-changed', page)
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 10px;
}

.pagination a {
  display: inline-block;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #495057;
}
/* 添加禁用状态样式 */
.pagination a.disabled {
  background: #f5f5f5;
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none; /* 阻止点击事件 */
  opacity: 0.7;
  border-color: #ddd;
}
.pagination a:hover,
.pagination a.active {
  background: #007BFF;
  color: white;
  border-color: #007BFF;
}
/* 新增页码信息标签样式 */
.pagination .page-info {
  padding: 10px 15px;
  color: #495057; /* 文字颜色 */
  font-size: 14px; /* 字号 */
  font-weight: 500; /* 中等字重 */
  white-space: nowrap; /* 防止换行 */
}
</style>